<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
      <!-- Import style -->
      <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
      <!-- Import Vue 3 -->
      <script src="//unpkg.com/vue@3"></script>
      <!-- Import component library -->
      <script src="//unpkg.com/element-plus"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
      <style>
        #app, body, html {
          padding: 0;
          margin: 0;
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
	<body>
      <div id="app">
        <el-input v-model="url" placeholder="请输入内容"></el-input>
        <el-select v-model="viewName">
          <el-option label="48x48" value="48x48"></el-option>
          <el-option label="128x128" value="128x128"></el-option>
          <el-option label="256x256" value="256x256"></el-option>
          <el-option label="512x512" value="512x512"></el-option>
          <el-option label="1024x1024" value="1024x1024"></el-option>
        </el-select>
        <el-card shadow="always">
	        <el-image :src="`/qrcode?content=${url}&viewName=${viewName}`" :fit="true" />
        </el-card>
      </div>
      <script>
        const {createApp} = Vue;
        const {ElMessage} = ElementPlus
        const request = axios.create({
          baseURL: 'http://localhost',
          timeout: 1000,
          headers: {'X-Custom-Header': 'foobar'}
        });
        const app = createApp({
          data() {
            return {
              url:'' ,
              viewName: '48x48'
            }
          },
          methods: {
          },
        });
        app.use(ElementPlus);
        app.mount('#app');
      </script>
	</body>
</html>
